<template>
    <view class="content" style="padding: 20px">

        <div class="flex_left" style="margin-bottom: 20px;border: 1px solid #ccc;border-radius: 6px;">
            <input v-model="req.keyword" style="flex-grow: 1;margin-left: 6px;"/>
            <button @click="http_list()" style="border-width: 0;">搜索</button>
        </div>


        <div v-for="item in list"
             @click="play_(item.mid)"
             @longpress="http_download(item.mid)"
             class="flex_left" style="margin-bottom: 20px"
             :style="{color: choose_item == item.mid ? '#FF6600 !important' : '#888'}"
        >

            <!--<image :src="item.pic" style="width: 50px;height: 50px;flex-shrink: 0"></image>-->

            <div>
                <div :style="{color: choose_item == item.mid ? '#FF6600 !important' : '#333'}">{{item.name}}</div>
                <div style="font-size: 12px;margin-top: 4px;">
                    {{item.singer}}
                </div>
            </div>

            <!--<div @click.self="http_download(item.mid)"></div>-->
        </div>

    </view>
</template>

<script>
    // 请求地址
    const httpUrl = "https://api.bbbug.com/"
    export default {
        data() {
            return {
                req: {
                    "access_token": "909a79939c09809eea98e92aefffcdd378bd016999999909a79939c09809eea98e92aefffcdd378bd0169",
                    "plat": "vue",
                    "version": 10000,
                    "room_id": 520,
                    "keyword": "",
                    "isHots": 0
                },
                list: [
                    /*{
                    album: "送你一朵山茶花",
                    length: "150",
                    mid: "4064065",
                    name: "送你一朵山茶花",
                    pic: "https://img2.kuwo.cn/star/albumcover/500/98/35/386050711.jpg",
                    singer: "好妹妹",
                    }*/
                ],
                choose_item: ''
            }
        },
        onLoad() {
            this.http_list()
        },
        methods: {
            http_list(flag) {
                uni.request({
                    url: httpUrl + 'api/song/search', //仅为示例，并非真实接口地址。
                    data: this.req,
                    header: {
                        'access_token': '909a79939c09809eea98e92aefffcdd378bd016999999909a79939c09809eea98e92aefffcdd378bd0169' //自定义请求头信息
                    },
                    success: (res) => {
                        console.log(res.data, 1111);
                        if (res.data.code == 200) {

                            this.list = res.data.data

                            if (flag && this.list.length) {
                                this.play_(this.list[0].mid)
                            }
                        }

                    }
                });
            },
            play_(mid) {

                this.choose_item = mid
                const innerAudioContext = uni.createInnerAudioContext();
                innerAudioContext.autoplay = true;
                innerAudioContext.src = `https://api.bbbug.com//api/song/playurl?mid=${mid}`;
                innerAudioContext.onPlay(() => {
                    console.log('开始播放');
                });
                innerAudioContext.onError((res) => {
                    console.log(res.errMsg);
                    console.log(res.errCode);
                    uni.showToast({
                        title: res.errMsg || '播放异常',
                        duration: 2000
                    });
                });
                innerAudioContext.onEnded(res => {
                    // 自动播放下一首
                    this.pay_next()
                })
            },
            pay_next() {
                let index = this.list.findIndex(i => i.mid == this.choose_item)
                if (this.list.length && index == -1) {
                    this.play_(this.list[0].mid)
                    return
                } else if (this.list.length && index < this.list.length - 1) {
                    this.play_(this.list[index + 1].mid)

                } else {
                    // 末尾了， 刷新列表，自动播放 第一首
                    this.http_list(true)
                }
            },
            http_download(mid) {
                uni.downloadFile({
                    url: `https://api.bbbug.com//api/song/playurl?mid=${mid}`, //仅为示例，并非真实的资源
                    success: (res) => {
                        if (res.statusCode === 200) {
                            console.log('下载成功',res);
                            uni.saveFile({
							      tempFilePath: res.tempFilePath,
							      success: function (res) {
							        var savedFilePath = res.savedFilePath;

									console.log('保存文件',res);
									uni.showToast({
									    title: '下载成功',
									    duration: 2000
									});
							      }
							});
                        }
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .flex {
        display: flex;
        align-items: center;
    }

    .flex_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
</style>
